<template>
  <div style="width: 100%; height: 100%">
      <div class="top_menu">
        <el-card v-for="item in dataList" :key="item.id">
          <div class="title">{{ item.title }}</div>
          <div class="icon_tag">
            <div class="left">
              <span :class="item.icon"></span>
              <el-tag type="warning" class="tag"
                ><span style="color: lightskyblue">{{ item.online }}</span> /
                <span style="color: #f40">{{ item.noramal }}</span></el-tag
              >
            </div>
            <div class="right">
              <el-button size="mini" type="danger">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </div>
      <div class="view">
        <div class="left_view">
          <el-card style="height:620px;">
            <group></group>
          </el-card>
        </div>
        <div class="right_view">
          <el-card>
            <precent></precent>
          </el-card>
        </div>
      </div>
  </div>
</template>

<script>
import precent from './precent.vue'
import group from './Group.vue'
export default {
  components: {
    group,
    precent
  },
  data () {
    return {
      dataList: [
        {
          id: '1',
          title: '当前在线用户',
          noramal: '340',
          online: '83',
          icon: 'iconfont icon-techreport- color1'
        },
        {
          id: '2',
          title: '在线问诊用户',
          noramal: '230',
          online: '33',
          icon: 'iconfont icon-tubiaozhizuomobankuozhan- color2'
        },
        {
          id: '3',
          title: '当前门诊预约',
          noramal: '200',
          online: '133',
          icon: 'iconfont icon-yuyue color3'
        },
        {
          id: '4',
          title: '系统消息通知',
          noramal: '90',
          online: '3',
          icon: 'iconfont icon-xitongtongzhi color4'
        }
      ]
    }
  }
}
</script>

<style scoped>
@import url(//at.alicdn.com/t/font_2776163_ftvetvklkdf.css);
.top_menu {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top_menu::before,
.top_menu::after {
  content: "";
  display: block;
  clear: both;
}
.top_menu .el-card {
  width: 340px;
  height: 150px;
  border-radius: 10px;
  margin: 0 40px;
}
.top_menu .el-card .title {
  width: 100%;
  height: 20%;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  text-shadow: 1px 1px 3px lightblue;
}
.top_menu .el-card .icon_tag {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
}
.top_menu .el-card .icon_tag .left {
  float: left;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.top_menu .el-card .icon_tag .left > span:nth-child(1) {
  display: block;
  font-size: 50px;
  width: 80px;
  height: 80px;
  background: -webkit-linear-gradient(
    135deg,
    rgba(255, 0, 200, 0.13),
    rgba(255, 0, 64, 0.16)
  );
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5px 5px;
  text-align: center;
  line-height: 70px;
  /* opacity: .5; */
  border: 1px solid lightsalmon;
}
.tag{
  margin-top: 40px;
  transform: translateY(-50%);
  margin-left: 10px;
  font-size: 10px;
}
.top_menu .el-card .icon_tag .right {
  float: left;
  padding-top: 20px;
}
.top_menu .icon_tag .right .el-button {
  font-size: 12px;
  border-radius: 5px;
  margin-top: 26px;
}
.color1 {
  color: aqua;
}
.color2 {
  color: chocolate;
}
.color3 {
  color: darkviolet;
}
.color4 {
  color: lightsalmon;
}
.view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.view .left_view{
  width: 70%;
  height: 100%;
}
.view .left_view .el-card{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  opacity: .9;
}
.view .right_view{
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.view .right_view .el-card{
  width: 450px;
  height: auto;
  border-radius: 10px;
}
</style>
